<!DOCTYPE html>
<html lang="zh-hans-CN">
<head>
  <meta charset="UTF-8">
  <title>每周抽奖</title>
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  <style>
    body {margin: 0;padding: 0; -webkit-user-select: none;}
    header img {width: 100%;padding-top: 10px;}
    section {margin: 0.75rem;}

    .turntable {
      position: relative;
      padding-top: 100%;
      background: url(../img/zp.png) no-repeat center/contain;
      z-index: 1;
    }
    .pointer {
      position: absolute;
      top: 3.6rem;
      left: 5.5rem;
      width: 6.3rem;
      height: 8.3rem;
      z-index: 5;
      background: url(../img/att.png) no-repeat center/contain;

      -webkit-transform: rotate(0deg);
      -webkit-transform-origin: 3.15rem 5.1rem;

      transform: rotate(0deg);
      transform-origin: 3.15rem 5.1rem;
    }
    .action {
      position: absolute;
      top: 6.25rem;
      left: 6.2rem;
      width: 5rem;
      height: 5rem;
      background: url(../img/zj.png) no-repeat center/contain;
      z-index: 10;
    }

    .btn-box{text-align:center;padding-top:1.7rem;margin-bottom:2rem;font-size:0;}
    .btn{background:#f75549;color:#fff;text-decoration:none;border-radius:0.2rem;padding:0.5rem 1.4rem;font-size:0.8rem;margin:0 0.5rem;}
    .winning{display:none;position:fixed;z-index:50;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);}
    .linght{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url(../img/l.png) no-repeat center/cover;
      -webkit-transform: scale(1) rotate(0deg);
      transform: scale(1) rotate(0deg);
      -webkit-transition: all 6s linear;
      transition: all 6s linear;
    }
    .linght-ani{-webkit-transform:scale(2.4) rotate(30deg);transform:scale(2.4) rotate(30deg);}
    .w-pop{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -5rem;
      margin-top: -7.5rem;
      width: 10rem;
      height: 15rem;
      background: url(../img/red.png) no-repeat center/contain;
    }
    .pop-tit{font-size:0.9rem;margin-top:4.25rem;text-align:center;line-height:1.6;color:#f2e400;}
    .pop-link{text-align:center;margin-top:4.75rem;}
    .pop-link a{font-size:0.7rem;color:#fff;}
    .loading-box{position:fixed;display:-webkit-box;top:0;left:0;width:100%;height:100%;background:#fff;z-index:200;-webkit-box-align:center;-webkit-box-pack:center;}
    .loading{display:inline-block;width:3rem;height:3rem;background:url(../img/logo.png) no-repeat center/contain;}
  </style>
</head>
<body>
<div class="loading-box">
  <div class="loading"></div>
</div>
<header>
  <img src="../img/tit.jpg" alt="标题">
</header>
<section>
  <div class="turntable">
    <div class="pointer"></div>
    <div class="action"></div>
  </div>

  <div class="btn-box">
    <a href="javascript:" class="btn" id="sm">游戏说明</a>
    <a href="recording.html" class="btn">中奖记录</a>
  </div>
</section>

<div class="winning">
  <div class="linght"></div>
  <div class="w-pop">
    <h2 class="pop-tit">恭喜您！抽到了<br><span id="money">200</span>元红包~</h2>
    <p class="pop-link"><a href="javascript:;">立即去领奖&#62;</a></p>
  </div>
</div>

<script src="../lib/zepto.min.js"></script>
<script src="../lib/layer.js"></script>
<script>
  var docEl = document.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function() {
        docEl.style.fontSize = 20*(docEl.clientWidth/375)+'px';
      };
  window.addEventListener(resizeEvt, recalc, false);
  document.addEventListener('DOMContentLoaded', recalc, false);

  $('#sm').tap(function () {
    layer.open({
      content: '<p style="text-align: left;">通过style设置你想要的样式通过style设置你想要的样式通过style设置你想要的样式</p>',
      btn: ['我知道了']
    });
  });

  var info = {
    0: 123,
    10: 194,
    20: 16,
    50: 88,
    100: 303,
    200: 52,
    500: 158
  };
  //var random = [0,10,20,50,100,200,500];
  //var ran = Math.floor(Math.random()*8);

  $('.action').on('tap',function () {
    var _this = this;
    $.ajax({
      url:'',
      type:'get',
      success:function (data) {
        rotate(200);
        $(_this).off('tap');
      },
      erro:function () {
        alert('链接超时');
      }
    });
  });
  function rotate(deg) {
    var late = 720 + info[deg];
    $('.pointer').css({
      'webkitTransform':'rotate(' + late + 'deg)',
      'transform':'rotate(' + late + 'deg)',
      'transition':'all 2.4s cubic-bezier(0.20 , 0.65 , 0.01 , 0.95)'
    });
    setTimeout(function () {
      if(deg){
        $('#money').html(deg);
        $('.winning').show();
        setTimeout(function () {
          $('.linght').addClass('linght-ani');
        },20);
      }
    },3000);
  }

  window.onload = function () {
    $('.loading-box').hide();
  }
</script>
</body>
</html>
